<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/custom.css" />
	</head>

	<body>
		<div id="app">
			<div class="row">
				<div class="col-xs-offset-2 col-xs-8">
					<div class="page-header">
						<h2>Router Basic - 01</h2>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-2 col-xs-offset-2">
					<div class="list-group">
						<!-- 使用 router-link 组件来导航. -->
						<!-- 通过传入 `to` 属性指定链接. -->
						<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
						<router-link class="list-group-item" to="/home">Home</router-link>
						<router-link class="list-group-item" to="/about">About</router-link>
					</div>
				</div>
				<div class="col-xs-6">
					<div class="panel">
						<div class="panel-body">
							<!-- 路由出口 -->
							<!-- 路由匹配到的组件将渲染在这里 -->
							<router-view></router-view>
						</div>
					</div>
				</div>
			</div>
		</div>

		<template id="home">
			<div>
				<h1>Home</h1>
				<p>{{msg}}</p>
				<div>
					<ul class="nav nav-tabs">
						<li>
							<router-link to="/home/news">News</router-link>
							<!--具名路径-->
						</li>
						<li>
							<router-link to="/home/message">Messages</router-link>
						</li>
						<!--两种写法均可-->
					</ul>
					<router-view></router-view>
				</div>
			</div>
		</template>

		<template id="news">
			<ul>
				<li>News 01</li>
				<li>News 02</li>
				<li>News 03</li>
			</ul>
		</template>

		<template id="message">
			<ul>
				<li>Message 01</li>
				<li>Message 02</li>
				<li>Message 03</li>
			</ul>
		</template>

		<template id="about">
			<div>
				<h1>About</h1>
				<p>This is the tutorial about vue-router.</p>
			</div>
		</template>
	</body>
	<script src="js/vue-v2.4.2-min.js"></script>
	<script src="js/vue-router-v2.7.0.js"></script>
	<script>
		// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

		// 1. 定义（路由）组件。
		// 可以从其他文件 import 进来

		/* 创建组件构造器  */
		var Home = Vue.extend({
			template: '#home',
			data: function() {
				return {
					msg: 'Hello, vue router!'
				}
			}
		})

		var News = Vue.extend({
			template: '#news'
		})

		var Message = Vue.extend({
			template: '#message'
		})

		var About = Vue.extend({
			template: '#about'
		})

		// 2. 定义路由
		// 每个路由应该映射一个组件。 其中"component" 可以是
		// 通过 Vue.extend() 创建的组件构造器，
		// 或者，只是一个组件配置对象。
		// 我们晚点再讨论嵌套路由。

		/* 创建路由映射  */
		const routes = [{
				path: '/home',
				component: Home,
				children:[
                    { path: '/home/news', component: News},
                    { path: '/home/message', component: Message}
                ]
			},
			{
				path: '/about',
				component: About
			},
			{
				path: '/',
				component: Home
			}
		]

		// 3. 创建 router 实例，然后传 `routes` 配置
		// 你还可以传别的配置参数, 不过先这么简单着吧

		/* 创建路由器  */
		const router = new VueRouter({
			routes // （缩写）相当于 routes: routes
		})
		//ps:vue2.0写法创建路由器写在映射路由之后否则会报没有定义routes这个错误

		// 4. 创建和挂载根实例。
		// 记得要通过 router 配置参数注入路由，
		// 从而让整个应用都有路由功能

		/* 启动路由  */
		const app = new Vue({
			router
		}).$mount('#app')

		//(自己理解)JavaScriptps流程:1,创建组件：创建单页面应用需要渲染的组件
		//                          2,映射路由：
		//			                3,创建路由：
		//			                4,启动路由：
		//          HTML流程:1,使用<router-link to="/home">Home</router-link>组件导航
		//                   并且通过传入 `to` 属性指定链接，<router-link> 默认会被渲染成一个 `<a>` 标签
		//                   2,使用<router-view>标签

		//          vue版本和vue-router版本必须是2.x的
	</script>

</html>